<template>
  <div class="business-edit">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <el-button @click="goBack" class="back-btn">
            <i class="fas fa-arrow-left mr-2"></i>返回
          </el-button>
          <div class="title-section">
            <h1 class="page-title">
              <i class="fas fa-edit mr-3"></i>
              {{ isCreateMode ? '新增业务类型' : '编辑业务类型' }}
            </h1>
            <p class="page-description">
              {{ isCreateMode ? '创建新的业务类型' : '修改业务类型信息和配置' }}
            </p>
          </div>
        </div>
        <div class="header-actions">
          <el-button @click="saveDraft" :loading="saveLoading">
            <i class="fas fa-save mr-2"></i>保存草稿
          </el-button>
          <el-button type="primary" @click="saveAndPublish" :loading="publishLoading">
            <i class="fas fa-check mr-2"></i>
            {{ isCreateMode ? '创建并发布' : '保存并发布' }}
          </el-button>
        </div>
      </div>
    </div>

    <!-- 表单内容 -->
    <div class="form-container">
      <el-form
        ref="businessFormRef"
        :model="businessForm"
        :rules="businessFormRules"
        label-width="120px"
        class="business-form"
      >
        <el-row :gutter="24">
          <!-- 左侧主要信息 -->
          <el-col :span="16">
            <!-- 基本信息 -->
            <div class="form-section">
              <div class="section-header">
                <h3 class="section-title">
                  <i class="fas fa-info-circle mr-2"></i>基本信息
                </h3>
              </div>
              
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="业务名称" prop="name">
                    <el-input 
                      v-model="businessForm.name" 
                      placeholder="请输入业务名称"
                      maxlength="50"
                      show-word-limit
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="业务类别" prop="category">
                    <el-select v-model="businessForm.category" placeholder="请选择业务类别" style="width: 100%">
                      <el-option label="民事纠纷" value="civil" />
                      <el-option label="刑事辩护" value="criminal" />
                      <el-option label="行政诉讼" value="administrative" />
                      <el-option label="商事仲裁" value="commercial" />
                      <el-option label="知识产权" value="intellectual" />
                      <el-option label="劳动争议" value="labor" />
                      <el-option label="婚姻家庭" value="family" />
                      <el-option label="其他" value="other" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="服务范围" prop="scope">
                    <el-select v-model="businessForm.scope" placeholder="请选择服务范围" style="width: 100%">
                      <el-option label="全国范围" value="national" />
                      <el-option label="华东地区" value="east_china" />
                      <el-option label="华南地区" value="south_china" />
                      <el-option label="华北地区" value="north_china" />
                      <el-option label="华中地区" value="central_china" />
                      <el-option label="西南地区" value="southwest_china" />
                      <el-option label="西北地区" value="northwest_china" />
                      <el-option label="东北地区" value="northeast_china" />
                      <el-option label="本地区域" value="local" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="业务图标" prop="icon">
                    <div class="icon-selector">
                      <el-popover
                        placement="bottom"
                        :width="400"
                        trigger="click"
                      >
                        <template #reference>
                          <el-button class="icon-display">
                            <i :class="businessForm.icon" v-if="businessForm.icon"></i>
                            <span v-if="!businessForm.icon">选择图标</span>
                          </el-button>
                        </template>
                        <div class="icon-grid">
                          <div 
                            v-for="icon in iconOptions" 
                            :key="icon"
                            :class="['icon-option', { selected: businessForm.icon === icon }]"
                            @click="selectIcon(icon)"
                          >
                            <i :class="icon"></i>
                          </div>
                        </div>
                      </el-popover>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              
              <el-form-item label="简短描述" prop="description">
                <el-input 
                  v-model="businessForm.description" 
                  type="textarea" 
                  :rows="2"
                  placeholder="请输入业务简短描述"
                  maxlength="200"
                  show-word-limit
                />
              </el-form-item>
              
              <el-form-item label="详细描述" prop="detailedDescription">
                <el-input 
                  v-model="businessForm.detailedDescription" 
                  type="textarea" 
                  :rows="4"
                  placeholder="请输入业务详细描述，包括服务内容、特色等"
                  maxlength="1000"
                  show-word-limit
                />
              </el-form-item>
            </div>

            <!-- 收费标准 -->
            <div class="form-section">
              <div class="section-header">
                <h3 class="section-title">
                  <i class="fas fa-money-bill-wave mr-2"></i>收费标准
                </h3>
                <el-button type="primary" size="small" @click="addPricingRule">
                  <i class="fas fa-plus mr-1"></i>添加
                </el-button>
              </div>
              
              <div class="pricing-rules">
                <div 
                  v-for="(rule, index) in businessForm.pricingRules" 
                  :key="index"
                  class="pricing-rule-card"
                >
                  <div class="rule-header">
                    <h4 class="rule-title">收费规则 {{ index + 1 }}</h4>
                    <el-button 
                      size="small" 
                      type="danger" 
                      text 
                      @click="removePricingRule(index)"
                      v-if="businessForm.pricingRules.length > 1"
                    >
                      <i class="fas fa-trash"></i>
                    </el-button>
                  </div>
                  
                  <el-row :gutter="16">
                    <el-col :span="6">
                      <el-form-item :prop="`pricingRules.${index}.serviceLevel`" label="服务级别">
                        <el-input v-model="rule.serviceLevel" placeholder="如：基础服务" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item :prop="`pricingRules.${index}.basePrice`" label="基础费用">
                        <el-input-number 
                          v-model="rule.basePrice" 
                          :min="0" 
                          :step="1000"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item :prop="`pricingRules.${index}.additionalFee`" label="附加费用">
                        <el-input-number 
                          v-model="rule.additionalFee" 
                          :min="0" 
                          :step="500"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item :prop="`pricingRules.${index}.effectiveDate`" label="生效日期">
                        <el-date-picker
                          v-model="rule.effectiveDate"
                          type="date"
                          placeholder="选择日期"
                          format="YYYY-MM-DD"
                          value-format="YYYY-MM-DD"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  
                  <el-form-item :prop="`pricingRules.${index}.description`" label="费用说明">
                    <el-input 
                      v-model="rule.description" 
                      placeholder="请详细说明该收费标准包含的服务内容"
                    />
                  </el-form-item>
                </div>
              </div>
            </div>

            <!-- 工作流程设置 -->
            <div class="form-section">
              <div class="section-header">
                <h3 class="section-title">
                  <i class="fas fa-project-diagram mr-2"></i>工作流程设置
                </h3>
                <div class="workflow-actions">
                  <el-button type="info" size="small" @click="openWorkflowSettings">
                    <i class="fas fa-cog mr-1"></i>配置工作流程
                  </el-button>
                  <el-button type="primary" size="small" @click="createNewWorkflow">
                    <i class="fas fa-plus mr-1"></i>创建新流程
                  </el-button>
                </div>
              </div>
              
              <!-- 当前工作流程概览 -->
              <div class="current-workflow-overview">
                <div class="workflow-info">
                  <div class="workflow-title">
                    <i class="fas fa-sitemap mr-2"></i>
                    {{ businessForm.workflowName || '默认业务流程' }}
                  </div>
                  <div class="workflow-description">
                    {{ businessForm.workflowDescription || '暂无流程描述' }}
                  </div>
                </div>
                
                <!-- 流程步骤预览 -->
                <div class="workflow-preview">
                  <div class="preview-title">
                    <i class="fas fa-eye mr-2"></i>流程步骤预览
                  </div>
                  <div class="steps-preview">
                    <div 
                      v-for="(step, index) in businessForm.workflowSteps" 
                      :key="index"
                      class="step-preview-item"
                    >
                      <div class="step-index">{{ index + 1 }}</div>
                      <div class="step-content">
                        <div class="step-name">{{ step.name || `步骤 ${index + 1}` }}</div>
                        <div class="step-duration">{{ step.duration || '待配置' }}</div>
                      </div>
                      <div class="step-arrow" v-if="index < businessForm.workflowSteps.length - 1">
                        <i class="fas fa-arrow-right"></i>
                      </div>
                    </div>
                  </div>
                  
                  <!-- 空状态 -->
                  <div v-if="!businessForm.workflowSteps.length" class="empty-workflow">
                    <i class="fas fa-info-circle mr-2"></i>
                    <span>尚未配置工作流程，请点击"配置工作流程"进行设置</span>
                  </div>
                </div>
                
                <!-- 流程统计 -->
                <div class="workflow-stats">
                  <div class="stat-item">
                    <div class="stat-value">{{ businessForm.workflowSteps.length }}</div>
                    <div class="stat-label">流程步骤</div>
                  </div>
                  <div class="stat-item">
                    <div class="stat-value">{{ calculateTotalDuration() }}</div>
                    <div class="stat-label">预计用时</div>
                  </div>
                  <div class="stat-item">
                    <div class="stat-value">{{ getNotificationRolesCount() }}</div>
                    <div class="stat-label">通知角色</div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>

          <!-- 右侧配置信息 -->
          <el-col :span="8">
            <!-- 状态配置 -->
            <div class="form-section">
              <div class="section-header">
                <h3 class="section-title">
                  <i class="fas fa-cog mr-2"></i>状态配置
                </h3>
              </div>
              
              <el-form-item label="业务状态" prop="status">
                <el-radio-group v-model="businessForm.status">
                  <el-radio label="active">启用</el-radio>
                  <el-radio label="inactive">停用</el-radio>
                </el-radio-group>
              </el-form-item>
              
              <el-form-item label="是否推荐">
                <el-switch v-model="businessForm.isRecommended" />
              </el-form-item>
              
              <el-form-item label="是否热门">
                <el-switch v-model="businessForm.isHot" />
              </el-form-item>
              
              <el-form-item label="排序权重" prop="sortOrder">
                <el-input-number 
                  v-model="businessForm.sortOrder" 
                  :min="0" 
                  :max="999"
                  style="width: 100%"
                />
                <div class="form-tip">数值越大排序越靠前</div>
              </el-form-item>
            </div>

            <!-- 业务属性 -->
            <div class="form-section">
              <div class="section-header">
                <h3 class="section-title">
                  <i class="fas fa-tags mr-2"></i>业务属性
                </h3>
              </div>
              
              <el-form-item label="预计处理时间">
                <el-input-number 
                  v-model="businessForm.estimatedDays" 
                  :min="1" 
                  :max="365"
                  style="width: 100%"
                />
                <div class="form-tip">单位：天</div>
              </el-form-item>
              
              <el-form-item label="难度等级">
                <el-rate v-model="businessForm.difficultyLevel" :max="5" show-text />
              </el-form-item>
              
              <el-form-item label="需要资质">
                <el-checkbox-group v-model="businessForm.requiredCertifications">
                  <el-checkbox label="lawyer">律师执业证</el-checkbox>
                  <el-checkbox label="notary">公证员资格</el-checkbox>
                  <el-checkbox label="arbitrator">仲裁员资格</el-checkbox>
                  <el-checkbox label="expert">专业技术资格</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              
              <el-form-item label="适用地区">
                <el-select 
                  v-model="businessForm.applicableRegions" 
                  multiple 
                  placeholder="选择适用地区"
                  style="width: 100%"
                >
                  <el-option label="上海" value="shanghai" />
                  <el-option label="北京" value="beijing" />
                  <el-option label="广东" value="guangdong" />
                  <el-option label="浙江" value="zhejiang" />
                  <el-option label="江苏" value="jiangsu" />
                  <el-option label="其他" value="other" />
                </el-select>
              </el-form-item>
            </div>

            <!-- 关联设置 -->
            <div class="form-section">
              <div class="section-header">
                <h3 class="section-title">
                  <i class="fas fa-link mr-2"></i>关联设置
                </h3>
              </div>
              
              <el-form-item label="关联业务">
                <el-select 
                  v-model="businessForm.relatedBusinesses" 
                  multiple 
                  placeholder="选择关联业务"
                  style="width: 100%"
                >
                  <el-option 
                    v-for="business in availableBusinesses" 
                    :key="business.value"
                    :label="business.label" 
                    :value="business.value" 
                  />
                </el-select>
              </el-form-item>
              
              <el-form-item label="标签">
                <el-input 
                  v-model="tagInput" 
                  placeholder="输入标签后按回车添加"
                  @keyup.enter="addTag"
                />
                <div class="tags-container" v-if="businessForm.tags.length">
                  <el-tag 
                    v-for="tag in businessForm.tags" 
                    :key="tag"
                    closable
                    @close="removeTag(tag)"
                    class="tag-item"
                  >
                    {{ tag }}
                  </el-tag>
                </div>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'BusinessEdit',
  setup() {
    const route = useRoute()
    const router = useRouter()
    
    const businessFormRef = ref(null)
    const saveLoading = ref(false)
    const publishLoading = ref(false)
    const tagInput = ref('')
    
    // 判断是创建还是编辑模式
    const isCreateMode = computed(() => route.params.id === 'create' || !route.params.id)
    
    // 图标选项
    const iconOptions = [
      'fas fa-car-crash text-red-500',
      'fas fa-home text-blue-500',
      'fas fa-heart text-pink-500',
      'fas fa-briefcase text-gray-500',
      'fas fa-gavel text-brown-500',
      'fas fa-handshake text-green-500',
      'fas fa-building text-purple-500',
      'fas fa-users text-orange-500',
      'fas fa-file-contract text-indigo-500',
      'fas fa-balance-scale text-teal-500',
      'fas fa-shield-alt text-red-600',
      'fas fa-university text-blue-600'
    ]
    
    // 可选关联业务
    const availableBusinesses = [
      { label: '离婚财产分割', value: 'divorce_property' },
      { label: '劳动争议调解', value: 'labor_dispute' },
      { label: '合同纠纷处理', value: 'contract_dispute' },
      { label: '债权债务清理', value: 'debt_collection' },
      { label: '知识产权保护', value: 'ip_protection' }
    ]
    
    // 表单数据
    const businessForm = reactive({
      id: null,
      name: '',
      category: '',
      scope: '',
      icon: '',
      description: '',
      detailedDescription: '',
      status: 'active',
      isRecommended: false,
      isHot: false,
      sortOrder: 100,
      estimatedDays: 30,
      difficultyLevel: 3,
      requiredCertifications: ['lawyer'],
      applicableRegions: [],
      relatedBusinesses: [],
      tags: [],
      pricingRules: [
        {
          serviceLevel: '',
          basePrice: 0,
          additionalFee: 0,
          description: '',
          effectiveDate: ''
        }
      ],
      // 工作流程设置
      workflowId: null,
      workflowName: '',
      workflowDescription: '',
      workflowSteps: []
    })
    
    // 表单验证规则
    const businessFormRules = {
      name: [
        { required: true, message: '请输入业务名称', trigger: 'blur' }
      ],
      category: [
        { required: true, message: '请选择业务类别', trigger: 'change' }
      ],
      scope: [
        { required: true, message: '请选择服务范围', trigger: 'change' }
      ],
      description: [
        { required: true, message: '请输入业务描述', trigger: 'blur' }
      ],
      detailedDescription: [
        { required: true, message: '请输入详细描述', trigger: 'blur' }
      ]
    }
    
    // 方法
    const goBack = () => {
      ElMessageBox.confirm('确认离开？未保存的更改将丢失。', '确认离开', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        router.go(-1)
      })
    }
    
    const selectIcon = (icon) => {
      businessForm.icon = icon
    }
    
    const addPricingRule = () => {
      businessForm.pricingRules.push({
        serviceLevel: '',
        basePrice: 0,
        additionalFee: 0,
        description: '',
        effectiveDate: ''
      })
    }
    
    const removePricingRule = (index) => {
      if (businessForm.pricingRules.length > 1) {
        businessForm.pricingRules.splice(index, 1)
      }
    }
    
    // 工作流程相关方法
    const openWorkflowSettings = () => {
      // 跳转到工作流程设置页面，并传递当前业务类型ID
      const businessId = businessForm.id || 'new'
      router.push({
        path: '/admin/workflow-settings',
        query: {
          businessType: businessId,
          returnTo: route.fullPath
        }
      })
    }
    
    const createNewWorkflow = () => {
      // 创建新的工作流程
      router.push({
        path: '/admin/workflow-settings',
        query: {
          action: 'create',
          businessType: businessForm.id || 'new',
          returnTo: route.fullPath
        }
      })
    }
    
    const calculateTotalDuration = () => {
      if (!businessForm.workflowSteps.length) return '0天'
      
      let totalDays = 0
      businessForm.workflowSteps.forEach(step => {
        if (step.duration) {
          // 简单提取数字（实际项目中可能需要更复杂的解析）
          const match = step.duration.match(/(\d+)/)
          if (match) {
            totalDays += parseInt(match[1])
          }
        }
      })
      
      return totalDays > 0 ? `${totalDays}天` : '待配置'
    }
    
    const getNotificationRolesCount = () => {
      if (!businessForm.workflowSteps.length) return 0
      
      const roles = new Set()
      businessForm.workflowSteps.forEach(step => {
        if (step.notificationRoles) {
          step.notificationRoles.forEach(role => roles.add(role))
        }
      })
      
      return roles.size
    }
    
    const addTag = () => {
      if (tagInput.value.trim() && !businessForm.tags.includes(tagInput.value.trim())) {
        businessForm.tags.push(tagInput.value.trim())
        tagInput.value = ''
      }
    }
    
    const removeTag = (tag) => {
      const index = businessForm.tags.indexOf(tag)
      if (index !== -1) {
        businessForm.tags.splice(index, 1)
      }
    }
    
    const validateForm = async () => {
      try {
        await businessFormRef.value.validate()
        return true
      } catch (error) {
        ElMessage.error('请完善必填信息')
        return false
      }
    }
    
    const saveDraft = async () => {
      saveLoading.value = true
      
      try {
        // 模拟保存草稿
        await new Promise(resolve => setTimeout(resolve, 1000))
        ElMessage.success('草稿保存成功')
      } catch (error) {
        ElMessage.error('保存失败')
      } finally {
        saveLoading.value = false
      }
    }
    
    const saveAndPublish = async () => {
      if (!(await validateForm())) {
        return
      }
      
      publishLoading.value = true
      
      try {
        // 模拟保存并发布
        await new Promise(resolve => setTimeout(resolve, 1500))
        
        if (isCreateMode.value) {
          ElMessage.success('业务类型创建成功')
        } else {
          ElMessage.success('业务类型更新成功')
        }
        
        router.push('/admin/business')
      } catch (error) {
        ElMessage.error('操作失败')
      } finally {
        publishLoading.value = false
      }
    }
    
    const loadBusinessData = () => {
      if (!isCreateMode.value) {
        // 模拟加载业务数据
        const businessId = route.params.id
        
        // 这里应该从API加载数据
        Object.assign(businessForm, {
          id: businessId,
          name: '交通事故人身损害赔偿',
          category: 'civil',
          scope: 'national',
          icon: 'fas fa-car-crash text-red-500',
          description: '专业处理交通事故导致的人身损害赔偿案件',
          detailedDescription: '交通事故人身损害赔偿是指机动车发生交通事故造成受害人人身伤亡、财产损失的，由保险公司在机动车第三者责任强制保险责任限额范围内予以赔偿；不足的部分，按照相关法律法规由当事人承担赔偿责任。',
          status: 'active',
          isRecommended: true,
          isHot: false,
          sortOrder: 200,
          estimatedDays: 45,
          difficultyLevel: 4,
          requiredCertifications: ['lawyer'],
          applicableRegions: ['shanghai', 'beijing', 'guangdong'],
          relatedBusinesses: ['labor_dispute', 'contract_dispute'],
          tags: ['交通事故', '人身损害', '赔偿'],
          pricingRules: [
            {
              serviceLevel: '基础服务',
              basePrice: 5000,
              additionalFee: 1000,
              description: '包含基础法律咨询、文书代理',
              effectiveDate: '2024-01-01'
            }
          ],
          // 工作流程设置
          workflowId: 'wf_traffic_accident_001',
          workflowName: '交通事故处理标准流程',
          workflowDescription: '专为交通事故人身损害赔偿案件设计的标准化处理流程',
          workflowSteps: [
            { name: '案件接收', duration: '1-2天', notificationRoles: ['client', 'primary_lawyer'] },
            { name: '证据收集', duration: '3-5天', notificationRoles: ['client', 'paralegal'] },
            { name: '责任认定', duration: '7-10天', notificationRoles: ['primary_lawyer'] },
            { name: '损失评估', duration: '5-7天', notificationRoles: ['client', 'primary_lawyer'] },
            { name: '协商谈判', duration: '10-15天', notificationRoles: ['client', 'primary_lawyer'] },
            { name: '结案处理', duration: '2-3天', notificationRoles: ['client', 'primary_lawyer', 'finance_staff'] }
          ]
        })
      }
    }
    
    onMounted(() => {
      loadBusinessData()
    })
    
    return {
      businessFormRef,
      saveLoading,
      publishLoading,
      tagInput,
      isCreateMode,
      iconOptions,
      availableBusinesses,
      businessForm,
      businessFormRules,
      goBack,
      selectIcon,
      addPricingRule,
      removePricingRule,
      openWorkflowSettings,
      createNewWorkflow,
      calculateTotalDuration,
      getNotificationRolesCount,
      addTag,
      removeTag,
      saveDraft,
      saveAndPublish
    }
  }
}
</script>

<style scoped>
/* 现代化UI样式 - 与系统风格保持一致 */
.business-edit {
  background: #f8fafc;
  min-height: 100vh;
  padding: 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

/* 页面头部 */
.page-header {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.header-left {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.back-btn {
  margin-top: 4px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
}

.page-description {
  color: #6b7280;
  margin: 0;
  font-size: 14px;
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* 表单容器 */
.form-container {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
}

.business-form {
  max-width: none;
}

/* 表单区块 */
.form-section {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e5e7eb;
}

.form-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  display: flex;
  align-items: center;
}

/* 图标选择器 */
.icon-selector {
  width: 100%;
}

.icon-display {
  width: 100%;
  justify-content: flex-start;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  background: white;
  color: #374151;
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  padding: 8px;
}

.icon-option {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 18px;
}

.icon-option:hover {
  border-color: #3b82f6;
  background: #eff6ff;
}

.icon-option.selected {
  border-color: #3b82f6;
  background: #dbeafe;
}

/* 收费规则卡片 */
.pricing-rules {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pricing-rule-card {
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
}

.rule-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.rule-title {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin: 0;
}

/* 工作流程步骤 */
.workflow-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.workflow-step-card {
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
}

.step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #3b82f6;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}

.step-title {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin: 0;
  flex: 1;
}

/* 标签容器 */
.tags-container {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-item {
  margin: 0;
}

/* 表单提示 */
.form-tip {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

/* 通知设置 */
.notification-settings {
  margin-top: 20px;
  padding: 16px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
}

.setting-label {
  font-size: 14px;
  font-weight: 600;
  color: #0c4a6e;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.template-variables {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.variable-tip {
  font-size: 12px;
  color: #6b7280;
  margin-right: 8px;
}

.variable-tag {
  font-size: 11px;
  padding: 2px 6px;
  background: #e0e7ff;
  color: #4f46e5;
  border: none;
  cursor: help;
}

.special-settings {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.escalation-settings {
  margin-top: 16px;
  padding: 12px;
  background: #fef3c7;
  border: 1px solid #fbbf24;
  border-radius: 6px;
}

.escalation-title {
  font-size: 13px;
  font-weight: 600;
  color: #92400e;
}

/* 工作流程设置样式 */
.workflow-actions {
  display: flex;
  gap: 8px;
}

.current-workflow-overview {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 20px;
}

.workflow-info {
  margin-bottom: 20px;
}

.workflow-title {
  font-size: 16px;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.workflow-description {
  color: #64748b;
  font-size: 14px;
  line-height: 1.5;
}

.workflow-preview {
  margin-bottom: 20px;
}

.preview-title {
  font-size: 14px;
  font-weight: 600;
  color: #4a5568;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.steps-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.step-preview-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  min-width: 120px;
}

.step-index {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #3182ce;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.step-content {
  flex: 1;
}

.step-name {
  font-size: 13px;
  font-weight: 500;
  color: #2d3748;
  line-height: 1.2;
}

.step-duration {
  font-size: 11px;
  color: #718096;
  margin-top: 2px;
}

.step-arrow {
  color: #a0aec0;
  font-size: 12px;
  margin: 0 4px;
}

.empty-workflow {
  text-align: center;
  padding: 24px;
  color: #718096;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  border-style: dashed;
}

.workflow-stats {
  display: flex;
  gap: 24px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}

.stat-item {
  text-align: center;
  flex: 1;
}

.stat-value {
  font-size: 18px;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #718096;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .business-edit {
    padding: 16px;
  }
  
  .header-content {
    flex-direction: column;
    gap: 16px;
  }
  
  .header-left {
    flex-direction: column;
    align-items: stretch;
  }
  
  .form-container {
    padding: 16px;
  }
  
  .icon-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .workflow-actions {
    flex-direction: column;
    gap: 8px;
  }
  
  .steps-preview {
    flex-direction: column;
    align-items: stretch;
  }
  
  .step-preview-item {
    min-width: auto;
  }
  
  .step-arrow {
    transform: rotate(90deg);
    margin: 4px 0;
  }
  
  .workflow-stats {
    flex-direction: column;
    gap: 12px;
  }
}
</style>
